<template>
    <div class="approvalDetails">
        <div class="approvalDetails_header">
            <div class="approvalDetails_header_navBar">
                {{ status == 0 ? '审批中' : status == 2 ? '已通过' : status == 1 ? '已驳回' : '' }}
                <img class="approvalDetails_header_navBar_img" src="@/assets/porduct/zuo_jiantou.png" alt=""
                    @click="routerBack">
            </div>
        </div>
        <ListItems class="approvalDetails_ListItems" :row="lookData" :status="status" @click="handleGetDetails()"
            :types="'deatils'" />
        <div class="approvalDetails_box">
            <StepBar stepBarTitle="审批流程" :data="getStepBarData()" :auditStatus="lookData.auditStatus" :status="status"
                :hmMechanismsList="lookData.hmMechanismsList" />
        </div>

        <div class="approvalDetails_footer" v-if="status == 2">
            <div class="footer_right" @click="approvalClick()">
                补样进度
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ListItems from './components/listItemsNewui.vue' // 列表单个项
import StepBar from './components/stepBar/index.vue'  // 步骤条
import { getDetailedById } from '@/api/operation/index'
const route: any = useRoute()
const router = useRouter()
const showLoading = ref(false)
const status = ref()
const lookData = ref<any>({})


// 补样进度操作
const approvalClick = async () => {
    router.push('/sampleProgress')
}


// 需要展示步骤条的数据
const getStepBarData = () => {
    return lookData.value.hmSampleAuditLogVos
}


// 返回
const routerBack = () => {
    router.push('/operationApproval')
}

/** 获取详情 */
const handleGetDetails = () => {
    router.push({
        path: `/researchBasicsDetail/${lookData.value.productId}`
    })
};

const getLook = async (id: any) => {
    showLoading.value = true
    const { data = {} } = await getDetailedById({ id })
    lookData.value = data
    showLoading.value = false
}
onMounted(() => {
    status.value = Number(route?.query?.status)
    getLook(route?.query?.id)
})
</script>

<style lang="less" scoped>
.approvalDetails {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-flow: column;
    background: #f6f8fa;

    .approvalDetails_header {
        padding-top: 45px;
        background: linear-gradient(#CDECFF 0%, #FFFFFF 100%);
        margin-bottom: 10px;

        .approvalDetails_header_navBar {
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            position: relative;

            .approvalDetails_header_navBar_img {
                position: absolute;
                top: 50%;
                left: 15px;
                transform: translate(0%, -50%);
                width: 15px;
                height: 16px;
            }
        }
    }

    .approvalDetails_ListItems {
        margin-bottom: 15px;
    }

    .approvalDetails_box {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0 15px 15px;
        box-sizing: border-box;
    }

    .approvalDetails_footer {
        width: 375px;
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        padding: 20px 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;


        .bt_f_left {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: 15px;
            margin-right: 30px;

            .buma {
                width: 20px;
                height: 20px;
                background: url("@/assets/newui/details/icon_buma@2x.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .bt_text {
                font-weight: 400;
                font-size: 12px;
                color: #0094FF;
                line-height: 12px;
                margin-top: 6px;
            }
        }

        .footer_center {
            width: 0px;
            flex: 2;
            height: 100%;
            border-radius: 5px;
            border: 1px solid #5FBBFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 16px;
            color: #0094FF;
            margin-right: 10px;
        }

        .footer_right {
            width: 0px;
            flex: 3;
            height: 100%;
            background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
        width: 315px;
        height: 317px;
        background-color: #fff;
        border-radius: 5px;
        position: relative;

        :deep .van-field__control {
            background: #F6FAFF !important;
        }

        ::placeholder {
            font-size: 14px;
            color: #B8BECA;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            width: 100%;
            text-align: center;
            margin: 30px 0 20px 0;
        }

        .van-image {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 18px;
            top: 18px;
        }

        :deep .van-form {
            min-height: 265px;
        }

        .button {
            color: #FFFFFF;
            font-size: 14px;
            width: 285px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            margin: auto;
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
    }
}

.wrappers {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
        width: 315px;
        height: 500px;
        background-color: #fff;
        border-radius: 5px;
        position: relative;
        box-sizing: border-box;
        padding: 0 15px;

        .mechanism_conent {
            width: 285px;
            height: 280px;
            background: linear-gradient(#FBFCFE 0%, #EFF6FF 100%);
            border-radius: 10px;
            margin-top: 15px;
            box-sizing: border-box;
            padding: 20px 15px;

            :deep(.van-cell-group--inset) {
                margin: 0 !important;
                margin-bottom: 20px !important;
                background: transparent !important;
            }

            :deep(.van-cell) {
                padding: 0 !important;
                background: none !important;
                background: transparent !important;
            }

            :deep(.van-field__control) {
                font-weight: 400 !important;
                font-size: 14px !important;
                color: #8492AD !important;

            }

            :deep(.van-field__button) {
                padding-left: 0px !important;
            }

            :deep .van-field__control {
                background: transparent !important;
            }

            .mechanism_conent_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                margin-bottom: 20px;

                .labels {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                }

                .value {
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                }
            }
        }

        .close {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 18px;
            top: 18px;
        }

        .column {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;


            .lable {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;

            }

            .value {
                width: 214px;
                height: 36px;
                background: #F2F3F5;
                border-radius: 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                box-sizing: border-box;
                padding: 0 15px;

                .van-image {
                    width: 10px;
                    height: 6px;


                }
            }
        }

        :deep .van-cell:after {
            display: none;
        }

        .label {
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            padding-left: 16px;
        }

        :deep .van-field__control {
            background: #F6FAFF !important;
            // height: 40px !important;

        }

        ::placeholder {
            font-size: 14px;
            color: #B8BECA;
        }

        .dates {
            :deep .van-field__control {
                height: 40px !important;
            }
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            width: 100%;
            text-align: center;
            margin: 30px 0 20px 0;
        }



        :deep .van-form {
            min-height: 265px;
        }

        .buttons {
            width: 285px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            line-height: 44px;
            position: absolute;
            bottom: 10px;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .save {
                width: 135px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
            margin-bottom: 10px;
        }



    }

}

.wrapper_qualifications {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .wrapper_div {
        width: 315px;
        height: 280px;
        background-color: #fff;
        border-radius: 5px;
        position: relative;
        box-sizing: border-box;
        padding: 0 15px;

        .close {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 18px;
            top: 18px;
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
            margin-bottom: 10px;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            width: 100%;
            text-align: center;
            margin: 30px 0 20px 0;
        }

        .column {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;


            .lable {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;

            }

            .value {
                width: 214px;
                height: 36px;
                background: #F2F3F5;
                border-radius: 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
                box-sizing: border-box;
                padding: 0 15px;

                .van-image {
                    width: 10px;
                    height: 6px;
                }
            }
        }

        .buttons {
            width: 285px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: center;
            line-height: 44px;
            position: absolute;
            bottom: 10px;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .save {
                width: 135px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }

    }
}
</style>